<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <el-form
      :model="ruleForm"
      class="register"
      ref="ruleForm"
      :rules="rules"
      label-width="96px"
    >
      <h3>
        注册新用户
        <span class="go"
          >我有账号，去 <router-link to="/login">登陆</router-link>
        </span>
      </h3>
      <div class="content">
        <el-form-item label="手机号:" prop="phone">
          <el-input
            class="el-input"
            type="text"
            placeholder="请输入你的手机号"
            v-model="ruleForm.phone"
            clearable
          />
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="验证码:" prop="code">
          <el-input
            class="el-input"
            type="text"
            placeholder="请输入验证码"
            clearable
            v-model="ruleForm.code"
          />
          <el-button @click="getCode"> 获取验证码 </el-button>
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="登录密码:" prop="password">
          <el-input
            class="el-input"
            type="password"
            placeholder="请输入登录密码"
            v-model="ruleForm.password"
            clearable
          />
        </el-form-item>
      </div>
      <div class="content">
        <el-form-item label="确认密码:" prop="checkPass">
          <el-input
            class="el-input"
            type="password"
            placeholder="请输入确认密码"
            v-model="ruleForm.checkPass"
            clearable
          />
        </el-form-item>
      </div>
      <div class="controls">
        <el-form-item prop="checked">
          <el-checkbox
            v-model="ruleForm.checked"
            label=" 同意协议并注册《京东用户协议》"
          >
          </el-checkbox>
        </el-form-item>
      </div>
      <div class="btn">
        <el-button @click="userRegister">完 成 注 册</el-button>
      </div>
    </el-form>

    <!-- 底部 -->
    <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机京东</li>
        <li>销售联盟</li>
        <li>京东社区</li>
      </ul>
      <div class="address">地址：陕西省渭南市临渭区朝阳大街中段6号</div>
      <div class="beian">陕ICP备190901号</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    //手机号的自定义校验规则
    var validatePhone = (rule, value, callback) => {
      let reg = /^1[3456789]\d{9}$/;
      if (value === "") {
        callback(new Error("手机号不能为空!"));
      } else {
        if (!reg.test(value)) {
          callback(new Error("手机号格式错误!"));
        } else {
          callback();
        }
      }
    };
    //验证码的自定义校验规则
    var validateCode = (rule, value, callback) => {
      let reg = /^\d{6}$/;
      if (value === "") {
        callback(new Error("验证码不能为空!"));
      } else {
        if (!reg.test(value)) {
          callback(new Error("验证码错误!"));
        } else {
          callback();
        }
      }
    };
    //密码的自定义校验规则
    var validatePass = (rule, value, callback) => {
      //由数字和字母组成，并且要同时含有数字和字母，且长度要在8-16位之间。
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (value === "") {
        callback(new Error("请输入密码！"));
      } else {
        if (!reg.test(value)) {
          callback(new Error("密码格式错误(8到16位数字和字母组合)!"));
        } else {
          callback();
        }
      }
    };

    //确定密码的自定义校验规则
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码!"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //确定框的自定义校验规则
    var validateChecked = (rule, value, callback) => {
      if (value == false) {
        callback(new Error("请勾选协议！"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        phone: "",
        code: "",
        password: "",
        checkPass: "",
        checked: false,
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: "change" }],
        code: [{ validator: validateCode, trigger: "change" }],
        password: [{ validator: validatePass, trigger: "change" }],
        checkPass: [{ validator: validatePass2, trigger: "change" }],
        checked: [{ validator: validateChecked, trigger: "change" }],
      },
    };
  },
  methods: {
    //获取验证码
    getCode() {
      this.$refs.ruleForm.validateField("phone", async (error) => {
        if (!error) {
          try {
            const { phone } = this.ruleForm;
            await this.$store.dispatch("user/getCode", phone);
            //从仓库拿到验证码放入data中
            this.ruleForm.code = this.$store.state.user.code;
          } catch (error) {
            alert(error.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //注册用户
    userRegister() {
      //表单项是否被校验
      this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          try {
            const { phone, code, password } = this.ruleForm;
            await this.$store.dispatch("user/userRegister", {
              phone,
              code,
              password,
            });
            //注册成功
            alert("注册成功!");
            //注册成功，路由跳转
            this.$router.push("/login");
          } catch (error) {
            alert(error.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.register-container {
  .register {
    width: 1200px;
    height: 500px;
    border: 1px solid rgb(223, 223, 223);
    margin: 0 auto;

    h3 {
      background: #ececec;
      margin: 0;
      padding: 6px 15px;
      color: #333;
      border-bottom: 1px solid #dfdfdf;
      font-size: 20.04px;
      line-height: 30.06px;

      span {
        font-size: 14px;
        float: right;

        a {
          color: #e1251b;
        }
      }
    }

    div:nth-of-type(1) {
      margin-top: 40px;
    }

    .content {
      padding-left: 390px;
      margin-bottom: 5px;
      margin-top: -10px;
      position: relative;

      label {
        font-size: 14px;
        width: 96px;
        text-align: right;
        display: inline-block;
      }

      .el-input {
        width: 270px;
        height: 38px;
        box-sizing: border-box;
        margin-top: -30px;
        text-align: center;
      }

      img {
        vertical-align: sub;
      }

      .error-msg {
        position: absolute;
        top: 100%;
        left: 495px;
        color: red;
      }
    }

    .controls {
      padding-left: 390px;
      margin-top: -20px;
      position: relative;

      input {
        vertical-align: middle;
      }

      .error-msg {
        position: absolute;
        top: 100%;
        left: 495px;
        color: red;
      }
    }

    .btn {
      text-align: center;
      line-height: 36px;
      margin: 30px 0 0 33px;

      button {
        outline: none;
        width: 270px;
        height: 45px;
        background: #e1251b;
        color: #fff !important;
        display: inline-block;
        border: 1px solid #e1251b;
        font-size: 16px;
      }
      button:active {
        background-color: #c82b23;
      }
    }
  }

  .copyright {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    line-height: 24px;

    ul {
      li {
        display: inline-block;
        border-right: 1px solid #e4e4e4;
        padding: 0 20px;
        margin: 15px 0;
      }
    }
  }
}
</style>
